<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="com.jd.ty.web.constant.DictionaryCode"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="ty" uri="/ty-tags"%>
<style>
<!--
.error {
	color: red;
}

.ui-button {
	margin-left: -1px;
}

.ui-button-icon-only .ui-button-text {
	padding: 0.34em;
}

.ui-combox-input {
	margin: 0;
	padding: 0.38em 0 0.40em 0.44em;
}
-->
</style>
<div class="button_area">
	<a class="button submit">保存</a>&nbsp;&nbsp;
	<a href="order/orders" class="button">返回</a>
</div>
<s:form method="post" action="order.save" namespace="/order"
	theme="simple">
	<s:hidden name="customerOrder.orderId"></s:hidden>
	<fieldset style="width: 45%; float: left; height: 240px">
		<legend>
			客户信息
		</legend>
		<s:div id="customer_detail">

			<table class="form_table">
				<s:textfield label="公司名称" title="输入完成后按回车键检查公司名称"
					id="customer_company_name"
					name="customerOrder.customer.custCompany.custCompanyName" size="30"
					required="true" maxlength="100" theme="xhtml"></s:textfield>
				<s:textfield label="公司地址"
					name="customerOrder.customer.custCompany.address"
					cssClass="company" size="30" required="true" maxlength="100"
					theme="xhtml"></s:textfield>
				<s:textfield label="联系电话"
					name="customerOrder.customer.custCompany.phoneNumber"
					cssClass="company" size="30" required="true" maxlength="100"
					theme="xhtml"></s:textfield>
				<s:textfield label="联系传真"
					name="customerOrder.customer.custCompany.faxNumber" size="30"
					maxlength="100" theme="xhtml" cssClass="company"></s:textfield>
				<s:textfield label="邮政编码"
					name="customerOrder.customer.custCompany.postalCode" size="30"
					maxlength="100" theme="xhtml" cssClass="company"></s:textfield>


				<s:textfield id="customer_name" label="签单人姓名" theme="xhtml"
					size="25" name="customerOrder.customer.customerName"
					cssClass="customer"></s:textfield>
				<s:textfield label="签单人所在部门" required="true"
					name="customerOrder.customer.section" size="30" maxlength="100"
					theme="xhtml" cssClass="customer"></s:textfield>
				<s:textfield label="签单人职位" required="true"
					name="customerOrder.customer.position" size="30" maxlength="100"
					theme="xhtml" cssClass="customer"></s:textfield>
				<s:textfield label="签单人电话" name="customerOrder.customer.phoneNumber"
					size="30" maxlength="100" theme="xhtml" cssClass="customer"></s:textfield>
				<s:textfield label="签单人邮箱" name="customerOrder.customer.email"
					size="30" maxlength="100" theme="xhtml" cssClass="customer"></s:textfield>
			</table>
		</s:div>
	</fieldset>

	<fieldset style="width: 45%; height: 240px">
		<legend>
			业务员信息
		</legend>
		<table>
			<tr>
				<td style="width: 8%">
					请选择部门:
					<s:select name="customerOrder.employee.department.dictionaryId"
						id="employee_department" list="departments" listKey="dictionaryId"
						listValue="dictionaryName"></s:select>
				</td>
				<td style="width: 8%">
					请选择业务员:
					<s:select name="customerOrder.employee.employeeId" id="employee_id"
						list="{}"></s:select>
				</td>
			</tr>
		</table>

		<s:div id="sales_detail">
			<br>读取详细信息...</s:div>

	</fieldset>

	<fieldset style="width: 92%">
		<legend>
			订单信息
		</legend>

		<table class="form_table">
			<s:textfield name="customerOrder.orderSerial" size="18"
				required="true" maxlength="100" theme="xhtml" label="订单编号"></s:textfield>
			<s:select name="customerOrder.status.dictionaryId" label="订单状态"
				id="order_status" list="orderStatus" listKey="dictionaryId"
				listValue="dictionaryName" cssClass="{required:true}" theme="xhtml"></s:select>
			<s:textfield name="customerOrder.dealDate" id="dealDate" size="18"
				required="true" maxlength="100" theme="xhtml" label="上单时间"></s:textfield>
			<s:radio list="projectTypes" label="项目类型"
				onclick="javascript:changeProjectType(this.value)"
				cssClass="{required:true}"
				name="customerOrder.projectType.dictionaryId" listKey="dictionaryId"
				listValue="dictionaryName" theme="xhtml"></s:radio>

		</table>
		<s:div id="projecttype">读取详细信息...</s:div>

	</fieldset>


</s:form>
<s:iterator value="projectSet">
	<div id="projecttype_<s:property value="key"/>" style="display: none">
		<br>
		<ty:productattr attrs="${value}"></ty:productattr>
	</div>
</s:iterator>

<script type="text/javascript">
	function changeProjectType(id) {

		$('#projecttype').html($('#projecttype_' + id).html());

	}
	$(document)
			.ready(
					function() {
						$("#customer_id").combobox();
						$('#employee_department').changeDepartment();

						$('#employee_department').bind('change', function() {
							$('#employee_id').changeDepartment();
						});
						$('#employee_id').bind('change', function() {
							$('#employee_id').changeEmployee();
						});
						$('#dealDate').datepicker( {
							dateFormat : 'yy-m-d'
						});

						$("form")
								.validate(
										{
											errorLabelContainer : $("div.error"),
											focusInvalid : true,
											rules : { //定义验证规则,其中属性名为表单的name属性  
												'customerOrder.dealDate' : {
													required : true
												},

												'customerOrder.customer.custCompany.custCompanyName' : {
													required : true
												},
												'customerOrder.customer.customerName' : {
													required : true
												},
												'customerOrder.projectType.dictionaryId' : {
													required : true
												}

											},
											messages : { //自定义验证消息  
												'customerOrder.dealDate' : {
													required : "订单处理时间是必需的<br>"
												},
												'customerOrder.customer.custCompany.custCompanyName' : {
													required : "公司名称是必需的<br>"
												},
												'customerOrder.customer.customerName' : {
													required : "签单人姓名是必需的<br>"
												},
												'customerOrder.projectType.dictionaryId' : {
													required : "请选择项目类型<br>"
												}
											}
										});

						var noChecked = true;
						$('input[name=customerOrder.projectType.dictionaryId]')
								.each(function(index,obj) {
									if (obj.checked) {
										changeProjectType(obj.value)
										noChecked=false;	
									}
								})
						if (noChecked) {
							$(':radio:first').trigger('click');
						}

						$("#customer_company_name").autocomplete(
								{
									source : "order/company.list.action",
									minLength : 1,
									select : function(event, ui) {
										var company = ui.item.company;
										$(".company").each(
												function(index, obj) {
													var name = $(obj).attr(
															"name").split(".")
															.pop();
													$(obj).val(company[name]);
												});
									}
								});

						$("#customer_name").combobox();

					});
	jQuery.fn.extend( {
		changeCustomer : function() {
			$.get('order/customer.detail.action?id=' + $('#customer_id').val(),
					function(data) {
						$('#customer_detail').html(data);
					});

		},
		changeEmployee : function() {
			var id = $('#employee_id').val();
			if (id) {
				$.get('order/employee.detail.action?id=' + id, function(data) {
					$('#sales_detail').html(data);
				});
			} else {
				$('#sales_detail').html('无详细信息');
			}

		},
		changeDepartment : function() {
			var id = $("#employee_department>option:selected").val();
			$.ajax( {
				type : "POST",// 用POST方式传输
				dataType : "json",// 数据格式:html
				data : 'id=' + id,
				url : 'order/employeesByDepartment',// 目标地址
				success : function(json) {
					var options = $(buildOptions(json.dataRows));
					$('#employee_id>option').each(function() {
						$(this).remove();
					})
					$('#employee_id').append(options);
					$('#employee_id').changeEmployee();
				}
			});
		}

	});
	function buildOptions(data) {
		var str = '';
		try {
			$.each(data, function(n, v) {

				str += '<option value=' + v.employeeId + '>' + v.employeeName
						+ '</option>';
			});
		} catch (e) {

		}
		return str;
	}

	(function($) {
		var options = [];
		$
				.widget(
						"ui.combobox",
						{
							_create : function() {
								var self = this;
								var input = this.input = $(this.element)
										.autocomplete(
												{
													delay : 0,
													minLength : 0,
													source : function(request,
															response) {
														var matcher = new RegExp(
																$.ui.autocomplete
																		.escapeRegex(request.term),
																"i");

														response(options);
													},
													search : function(event, ui) {

													},
													select : function(event, ui) {
														var customer = ui.item.customer;
														$(".customer")
																.each(
																		function(
																				index,
																				obj) {
																			var name = $(
																					obj)
																					.attr(
																							"name")
																					.split(
																							".")
																					.pop();
																			$(
																					obj)
																					.val(
																							customer[name]);
																		});
													},
													change : function(event, ui) {
														if (!ui.item) {

															self.element.value = this.value;
															var matcher = new RegExp(
																	"^"
																			+ $.ui.autocomplete
																					.escapeRegex($(
																							this)
																							.val())
																			+ "$",
																	"i"), valid = false;
															select
																	.children(
																			"option")
																	.each(
																			function() {
																				if ($(
																						this)
																						.text()
																						.match(
																								matcher)) {
																					this.selected = valid = true;
																					return false;
																				}
																			});
															if (!valid) {
																return false;
															}
														}
													}
												})
										.addClass(
												"ui-widget ui-widget-content ui-corner-left ui-combox-input");

								input.data("autocomplete")._renderItem = function(
										ul, item) {
									return $("<li></li>").data(
											"item.autocomplete", item).append(
											"<a>" + item.label + "</a>")
											.appendTo(ul);
								};

								this.button = $(
										"<button type='button'  >&nbsp;</button>")
										.attr("tabIndex", -1)

										.insertAfter(input)
										.button(
												{
													icons : {
														primary : "ui-icon-triangle-1-s"
													},
													text : false
												})
										.removeClass("ui-corner-all")
										.addClass(
												"ui-corner-right ui-button-icon")
										.click(
												function() {
													if (input.autocomplete(
															"widget").is(
															":visible")) {
														input
																.autocomplete("close");
														return;
													}

													$(this).blur();

													$
															.ajax( {
																type : "POST",// 用POST方式传输
																dataType : "json",// 数据格式:html
																data : "term="
																		+ $(
																				"#customer_company_name")
																				.val(),
																url : 'order/customer.list.action',// 目标地址
																success : function(
																		json) {
																	options = json.dataRows;
																	input
																			.autocomplete(
																					"search",
																					options);
																	input
																			.focus();
																}
															});

												});
							},

							destroy : function() {
								this.input.remove();
								this.button.remove();
								this.element.show();
								$.Widget.prototype.destroy.call(this);
							}
						});
	})(jQuery);

	//-->
</script>

